<template>
	<div ref="pie" class="pie" style="width: 400px; height: 300px;"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
	name: "chart-pie",
	data() {
		return {}
	},
	mounted() {
		this.draw()
	},
	methods: {
		draw() {
			let option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '5%',
					left: 'center'
				},
				series: [
					{
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [
							{ value: 1048, name: 'Search Engine' },
							{ value: 735, name: 'Direct' },
							{ value: 580, name: 'Email' },
							{ value: 484, name: 'Union Ads' },
							{ value: 300, name: 'Video Ads' }
						]
					}
				]
			};
			let myChart = echarts.init(this.$refs.pie);
			myChart.setOption(option);
		}
	}
}
</script>

<style scoped>

</style>